import React from 'react';
import { Route, NavLink } from 'react-router-dom';
import fetch from 'isomorphic-fetch';
import Toast from 'antd-mobile/lib/toast';
import Menu from 'shared/components/Menu';
import HeaderNav from 'shared/components/HeaderNav';
import BuyProductDetail from './BuyProductDetail';
import Detail from './Detail';
import Specification from './Specification';
import ComposeBuy from './ComposeBuy';
import { fetchProductInfo } from './api';
import './index.less';

const getBodyExpression = /<body[^>]*>([\s\S]*)<\/body>/;
export default class ProductDetail extends React.PureComponent {
  state = {
    data: {}
  }

  componentDidMount() {
    this.fetchProductInfo()
  }

  fetchProductInfo(selectId) {
    Toast.loading('数据加载中', 20)
    let { id } = this.props.match.params;
    if (!isMobile) {
      const { pathname } = __self.history.location
      if (pathname.indexOf('buyProductDetail') !== -1) {
        location.href = `${window.url}/prodetails?product_id${id}`;
        return;
      }
    }
    if (selectId) {
      id = selectId;
      this.setState({ showSelectSku: true });
    }

    return fetchProductInfo({ product_id: id }).then(({ data }) => {
      const { content_url_selected } = data;
      const { content_url, attribute_url } = data;
      this.setState({ data });
      Toast.hide();

      if (+content_url_selected !== 0) {
        if (content_url) {
          fetch(`/image/product${content_url}`)
            .then((response) => {
              return response.text()
            })
            .then((res) => {
              const contentHtml = res.match(getBodyExpression)
              data.content = contentHtml && contentHtml[0];

              this.setState({ data });
            })
            .catch(function(ex) {
              console.log('parsing failed', ex)
            })
        }
        if (attribute_url) {
          fetch(`/image/product${attribute_url}`)
            .then((response) => {
              return response.text()
            })
            .then((res) => {
              const contentHtml = res.match(getBodyExpression)
              data.content2 = contentHtml && contentHtml[0];
              this.setState({ data });
            })
            .catch(function(ex) {
              console.log('parsing failed', ex)
            })
          Toast.hide();
        }
      }
    });
  }

  render() {
    const { url } = this.props.match;
    const { data } = this.state;
    const { content_url_selected, groupbuyproductlist = [] } = data;
    const isLocalHtml = +content_url_selected !== 0
    return (
      [
        <HeaderNav key="HeaderNav" />,
        <div className="product" key="product">
          <ul className="product-nav">
            <li><NavLink to={`${url}/buyProductDetail`} activeClassName="active">商品</NavLink></li>
            {
              !!groupbuyproductlist.length &&
              <li><NavLink to={`${url}/composeBuy`} activeClassName="active">组合购买</NavLink></li>
            }
            <li>
              <NavLink to={`${url}/Detail`} activeClassName="active">详情</NavLink>
            </li>
            {
              !!data.attribute_url &&
              <li>
                <NavLink to={`${url}/Specification`} activeClassName="active">规格</NavLink>
              </li>
            }
          </ul>

          <Route
            path={`${url}/buyProductDetail`}
            component={() =>
              (<BuyProductDetail
                item={data}
                showSelectSku={this.state.showSelectSku}
                fetchProductInfo={(id) => this.fetchProductInfo(id)}
                productId={this.props.match.params.id}
              />)
            }
          />
          <Route path={`${url}/detail`} component={() => <Detail content={data.content} isLocalHtml={isLocalHtml} />} />
          <Route path={`${url}/composeBuy`} component={() => <ComposeBuy item={data} />} />

          <Route path={`${url}/specification`} component={()=> <Specification content2={data.content2} isLocalHtml={isLocalHtml} />} />
        </div>,
        <Menu key="menu" />
      ]
    )
  }
}